<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-04-20 09:16:32
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-21 16:33:04
 * @Description:
 *
-->

<template>
  <div class="container-monitor-ctn" @click="jumpTo('monitor/cluster?activeTab=ContainerIndex')">
    <div class="title">容器组监控</div>
    <div class="content">
      <el-table
        :data="containerList"
        stripe
        :header-cell-style="{ height: '40px !important',color: 'rgba(219, 241, 255, 1)',background:'rgba(54, 78, 120, 0.8400) !important'}"
        :row-style="{background:'rgba(48, 102, 142, 0.3700)',color:'rgba(176, 207, 232, 1)'}"
        :cell-style="{height:'35px'}"
        empty-text="暂无数据"
      >
        <el-table-column prop="podName" align="center" show-overflow-tooltip label="容器组名称" />
        <!-- 节点-->
        <el-table-column prop="nodeName" align="center" label="节点" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.nodeName }}{{ "(" }}{{ scope.row.nodeIp }}{{ ")" }}
          </template>
        </el-table-column>
        <!-- 容器组-->
        <el-table-column prop="podIP" align="center" label="容器组" show-overflow-tooltip />
        <!-- CPU-->
        <el-table-column prop="cpuUse" align="center" label="CPU" />
        <!-- 内存-->
        <el-table-column prop="memUse" align="center" label="内存" />
      </el-table>
    </div>
  </div>
</template>

<script>
import { getPodTask } from '@/api/cnap/cn-insight'
export default {
  name: 'ContainerMonitor',
  props: {},
  data() {
    return {
      isResult: false,
      isInitial: false,
      containerList: []// 容器组数据
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getDataList()
  },
  methods: {
    /**
     * @description: 各种操作触发
     * @description: 获取数据
     * @return {*}
     */
    getDataList() {
      this.containerList = []// 容器组表格数据置空
      const params = {
        cloudVendor: '', // 集群供应商
        k8sClusterName: '', // 集群
        nodeName: '', // 节点
        keyWord: '', // 容器组
        page: 1, // 页面
        pageSize: 3// 页面大小
      }
      getPodTask(params).then(res => {
        // res.code === 200正常
        if (res.code === 200) {
          // 数据在res.data中
          for (let i = 0; i < res.data.result.length; i++) {
            const item = {
              index: (this.currentPage - 1) * this.pageSize + i + 1, // 表格数据标号
              podIP: res.data.result[i].podIP, // 表格数据容器组ip
              podName: res.data.result[i].podName, // 表格数据名称
              nodeIp: res.data.result[i].nodeIp, // 表格数据节点ip
              nodeName: res.data.result[i].nodeName, // 表格数据节点名称
              age: res.data.result[i].age, // 表格数据age
              CPU: res.data.result[i].cpuLastRate, // 表格数据cpu
              memory: res.data.result[i].memoryLastRate, // 表格数据内存
              cpuUse: res.data.result[i].cpuUse, // 表格数据cpu使用率
              memUse: res.data.result[i].memUse, // 表格数据内存使用率
              namespace: res.data.result[i].namespace, // 表格数据命名空间
              cloudVendor: res.data.result[i].cloudVendor, // 表格数据集群供应商
              k8sClusterName: res.data.result[i].k8sClusterName, // 表格数据集群名称
              workLoadName: res.data.result[i].workLoadModel ? res.data.result[i].workLoadModel.workLoadName : ''// 表格数据工作负载
            }
            this.containerList.push(item)
          }
          if (this.containerList.length > 2) {
            this.containerList.length = 2
          }
        } else {
          // 数据查询失败
          // 输出报错信息
          this.$message.error(res.message)
        }
      })
    },
    /**
     * @description: 跳转
     * @description: 跳转集群监控页面
     * @return {*}
     */
    jumpTo(path) {
      this.$router.replace({
        path: path
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.container-monitor-ctn {
  width: 494px;

  .title {
    width: 494px;
    height: 28px;
    line-height: 28px;
    background: url("~@/assets/imgs/situation/bg_title_normal.png") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-left: 25px;
    .textStyle(16px , 600, #03d3ff);
  }

  .content {
    margin-top: 8px;
    box-sizing: border-box;
    padding: 8px 10px 0;
    height: 120px;
    background: linear-gradient(
      351deg,
      rgba(60, 108, 158, 0.37) 0%,
      rgba(19, 61, 91, 0.35) 100%
    );

    .titles {
      height: 34px;
      background: rgba(54, 78, 120, 0.84);
      display: flex;
      align-items: center;

      .title-item {
        .textStyle(14px , 500, #DBF1FF);
        box-sizing: border-box;
        &.t1 {
          width: 132px;
          padding-left: 14px;
        }
        &.t2 {
          width: 105px;
        }
        &.t3 {
          width: 105px;
        }
        &.t4 {
          width: 75px;
        }
        &.t5 {
          flex: 1;
        }
      }
    }
  }
}
</style>
<style lang="less">
.container-monitor-ctn {
     .el-table--striped .el-table__body tr.el-table__row--striped td {
       background-color:rgba(0, 21, 39, 0.3100) !important; /* def2ff f2faff */
    }
  .el-table,
       .el-table__expanded-cell {
        background-color: transparent !important;
      }
      /* 表格内背景颜色 */
       .el-table th,
       .el-table tr,
      .el-table td {
        background-color: transparent !important;
        border:0 !important; //去除表格
      }
    /*去除底边框*/
    el-table td.el-table__cell {
      border:0 !important;
    }
    el-table th.el-table__cell.is-leaf {
      border:0 !important;
    }
    .el-table .el-table__cell {
    padding: 0px 0px !important;
    }
    //去除鼠标悬浮效果
    .el-table::before {
    height: 0px !important;
    }
}
</style>
